<template>
  <div class="main">
      <h1>预约挂号</h1>
     <header>
          <dl class="info">
              <dt><el-avatar size="large" :src="'http://localhost:9999/imgs/doc/'+p.map?.doc.photo" /><br/>{{p.map?.doc.name}}</dt>
              <dd>出诊日期:{{p.workDateString}} {{p.workTime==1?'上午':'下午'}}</dd>
              <dd>诊室:{{p.room}}</dd>
              <dd>已挂号 {{p.bookCount}}/{{p.planCount}}</dd>
          </dl>
     </header>
       <section>
           <div class="paybtn" @click="pay">
               挂号费<br/>￥{{p.fee}}元
           </div>
       </section>
  </div>
  
</template>

<script>
import { useRoute,useRouter } from 'vue-router'
import router from '../router'
export default {
   inject:["global"],
   data(){
       return{
           p:{},
           planid:useRoute().query.planid
       }
   },
   methods:{
      pay:function(){
          if(!confirm("您确认支付吗?"))
            return;
           const axios=this.global.axios;
            axios.post("http://192.168.2.5:9000/hp/order/book/add?planid="+this.planid)
            .then(resp=>{
                    alert(resp.data.msg);
                    //跳转到我的预定列表
                    router.push("/mybooks");
            })
      }
   },
   mounted:function(){
       //this.empno=route.query.empno;
       const axios=this.global.axios;
       axios.get("http://192.168.2.5:9000/hp/order/plan/findbyid?planid="+this.planid)
       .then(resp=>{
           this.p=resp.data.obj;
       })
   },
}
</script>

<style  scoped>
header,section{display: flex;justify-content: center;margin:50px}
.info{border-bottom: 1px solid #ccc;width:300px}
   .info dt{
       float:left;
   }
   .paybtn{
       display: flex;justify-content: center;align-items: center;
       background-color: cornflowerblue;
       text-align: center;
       width:100px;
       height:100px;
       border-radius: 50%;
   }
</style>>
   
